<template>
    <div class="merchant-page">
       <div>
           <el-form>
               <el-form-item label="时间段：">
                   <el-select v-model="searchForm.timeType" placeholder="请选择时间段" size="small">
                        <el-option v-for="(item, index) in statusData" :key="index" :label="item.name" :value="item.id"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item>
                   <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
               </el-form-item>

           </el-form>

       </div>
       <div class="commissionText">
           <span style="margin-right: 30px;">支付订单数：{{pay_all_order_num}}</span>
           <span style="margin-right: 30px;">支付佣金：{{pay_all_commission}}</span>
           <span style="margin-right: 30px;">撤销订单数：{{cancel_all_order_num}}</span>
           <span style="margin-right: 30px;">撤销佣金：{{cancel_all_commission}}</span>
           <span style="margin-right: 30px;">{{timeTypeText[searchForm.timeType] + '订单数：' + allOrderCount}}</span>
           <span>{{timeTypeText[searchForm.timeType] + '佣金：' + allCommission}}</span>
       </div>
       <div>
           <el-table :data="tableData" border>
               <el-table-column prop="name" label="店铺名称"></el-table-column>
               <el-table-column prop="merchant_phone"  label="商户号"></el-table-column>
               <el-table-column prop="pay_order_num" label="支付订单数"></el-table-column>
               <el-table-column prop="pay_commission"  label="支付佣金"></el-table-column>
               <el-table-column prop="cancel_order_num" label="撤销订单数"></el-table-column>
               <el-table-column prop="cancel_commission" label="撤销佣金"></el-table-column>
               <el-table-column prop="order_count" label="订单数"></el-table-column>
               <el-table-column prop="all_commission" label="佣金"></el-table-column>

           </el-table>
            <!-- <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div> -->
       </div>
    </div>

</template>
<script>
import {apiPromoterData} from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    timeType: 1,
                    token: window.sessionStorage.getItem("token")
                },
                statusData: [{
                    id: 1,
                    name: '昨日'
                },{
                    id: 3,
                    name: '本月'
                },{
                    id: 2,
                    name: '上月'
                }],
                pageTotal: 0,
                allCommission: 0,
                timeTypeText:{
                  1: '昨日',
                  2: '上月',
                  3: '本月'
                },
                allOrderCount: 0,
                pay_all_order_num: 0,
                cancel_all_order_num: 0,
                cancel_all_commission: 0,
                pay_all_commission: 0
            }
        },
        created () {
            this.getTableData()
        },
        methods:{
            getTableData (){
               this.$showLoading()
                apiPromoterData(this.searchForm).then(res =>{
                    this.tableData = res.msg.yesterday_commission_list
                    this.allCommission = res.msg.yesterday_all_commission
                    this.allOrderCount = res.msg.all_order_count
                    this.pay_all_order_num = res.msg.pay_all_order_num
                    this.cancel_all_order_num = res.msg.cancel_all_order_num
                    this.cancel_all_commission = res.msg.cancel_all_commission
                    this.pay_all_commission = res.msg.pay_all_commission
                    this.$hideLoading()
                }).catch(res => {
                    this.$hideLoading()
                    this.$message.error('数据加载失败')
                })
            },
            searchData(){
                this.getTableData()
            },
            handleSizeChange(val){
                this.searchForm.limit = val;
      	        this.getTableData()
            },
            handleCurrentChange(val){
                this.searchForm.page = val;
      	        this.getTableData()
            }
        }
    }
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/style.less';
.commissionText {
    text-align: right;
    color: red;
    margin-bottom: 10px;
}
</style>
